<template>
    <div class="Order">
       <el-table size="small" :data="orderList" width="98">
            <el-table-column   label="编号" width="180" type="index"/>               
            <el-table-column v-if="false" prop="id"  label="编号" width="100" />               
            <el-table-column  prop="user_name" label="用户名" width="100"  />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="pay_status" label="订单状态" width="180" />
            <el-table-column prop="check_time" label="入住时间" width="180" >
                <template #default="scope">
                    {{ formatTimestamp(scope.row.check_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="leave_time" label="退订时间" width="180" >
                <template #default="scope">
                    {{ formatTimestamp(scope.row.leave_time) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                <el-button
                    v-if="scope.row.pay_status === '待使用'"
                    type="primary"
                    @click="handleUseOrder(scope.row.id)"
                    >使用</el-button
                >
                <el-button
                    v-if="scope.row.pay_status === '已完成'"
                    type="success"
                    @click="handleSettleOrder(scope.row.id)"
                    >结算</el-button
                >
                </template>
            </el-table-column>    
             
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { $orderList,$handleUseOrder,$handleSettleOrder } from "../../api/order.ts";
let orderList = ref([])
import {ElNotification} from 'element-plus'
//加载角色列表
const loadOrderList = async()=>{
    orderList.value = await $orderList();
    console.log(orderList.value);
    
}
import { format } from 'date-fns';

const formatTimestamp = (timestamp: number) => {
  return format(new Date(timestamp ), 'yyyy-MM-dd ');
};

const handleUseOrder = async(id:number) =>{
    let ret = await $handleUseOrder({id});
    console.log(ret);
    
    if(ret.code === 2001){
        ElNotification({
                title: '成功！',
                message: '使用成功！',
                type: 'success',
        })
        loadOrderList()
    }
}

const handleSettleOrder = async(id:number) =>{
    
    let ret = await $handleSettleOrder({id});
    console.log(ret);
    
    if(ret.code === 2001){
        loadOrderList()
        ElNotification({
                title: '成功！',
                message: '结算成功！',
                type: 'success',
        })
    }
}
// 时间戳转换函数
// const formatTimestamp = (timestamp: number) => {
//   const date = new Date(timestamp * 1000); // 将秒转换为毫秒
//   return date.toLocaleString(); // 格式化日期
// };
onMounted(()=>{
    loadOrderList()
})
</script>

<style lang="scss" scoped>

</style>